<template>
	<div id="app" @touchstart="gotouchstart" @touchmove="gotouchmove">
		<router-view>
			
		</router-view>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	let _this;
	let timeOutEvent = 0; // 定时器  
	export default {
		name: 'app',
		beforeCreate() {
			_this = this;
		},
		watch: {
			$route(to, from) { //监控路由发生变化，触发事件to为进入页面，from为离开页面
				this.$nextTick(() => {
					setTimeout(() => {
						_this.checkUpdate(false);
					}, 1000);
				});
				setTimeout(() => {
					Toast.clear();
				}, 500);
			}
		},
		methods: {
			gotouchstart() {
				let that = this;
				clearTimeout(timeOutEvent); // 清除定时器
				timeOutEvent = 0;
				timeOutEvent = setTimeout(function() {
					// 执行长按要执行的内容，
					if(window.plus){
						// 震动
						//plus.device.vibrate(1000);;
					}else{
						document.addEventListener("plusready",plusReady,false);
					}
				}, 600); // 这里设置定时
			},
			// 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
			gotouchmove() {
				clearTimeout(timeOutEvent); // 清除定时器
				timeOutEvent = 0;
			},
			/**
			 * 检查更新
			 * @param {热更新是否提示更新对话框} tipsFlag
			 */
			checkUpdate(tipsFlag) {
				let $this = this;
				if(window.plus) {
					// 获取本地应用资源版本号
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						// 检测更新url
						var checkUpdateUrl = "https://cdn.aiylqy.com/apps/update.json";
						// 下载热更新文件
						var hotUpdateFileUrl = "https://cdn.aiylqy.com/apps/H5ABE0B1A.wgt";
						// 本地版本号（已安装版本号）
						var localVer = inf.version;
						//			plus.nativeUI.showWaiting("检测更新...");
						var xhr = new XMLHttpRequest();
						xhr.onreadystatechange = function() {
							switch(xhr.readyState) {
								case 4:
									plus.nativeUI.closeWaiting();
									if(xhr.status == 200) {
										var resp = JSON.parse(xhr.responseText);
										var u = navigator.userAgent,
											app = navigator.appVersion;
										var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
										var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
										if(isAndroid) {
											var device = resp.android;
										}
										if(isiOS) {
											var device = resp.ios;
										}
										// 如果可更新
										if(device.canUpdate) {
											var remoteVer = device.ver;
											if(localVer && remoteVer) {
												// 先判断版本号，要不要更新
												var lvs = localVer.split('.');
												var rvs = remoteVer.split('.');
												for(var i = 0; i < lvs.length; i++) {
													// 如果本地版本号有一截比服务器的小，就停止比较
													if(Number(lvs[i]) < Number(rvs[i])) break;
												}
												// 如果i比lvs长度小，证明本地版本号有比服务器小的部分，提前停止了比较，就需要执行更新操作
												if(i < lvs.length) {
													if(device.isHotUpdate) { // 热更新
														if(tipsFlag) { // 如果要提示更新，就显示确定对话框
															alert('发现重要版本更新，为确保账户安全，请及时更新')
														}
														plus.nativeUI.showWaiting('下载热更新文件...');
														plus.downloader.createDownload(hotUpdateFileUrl, {
															filename: "_doc/update/"
														}, function(d, status) {
															if(status == 200) {
																var path = d.filename;
																// 更新应用资源
																plus.nativeUI.showWaiting('安装热更新文件...');
																plus.runtime.install(path, {}, function() {
																	plus.nativeUI.closeWaiting();
																	plus.runtime.restart();
																	plus.runtime.restart();
																}, function(e) {
																	plus.nativeUI.closeWaiting();
																	plus.nativeUI.alert('安装热更新文件失败' + "[" + e.code + "]：" + e.message);
																});
															} else {
																plus.nativeUI.alert('下载热更新文件失败');
															}
															plus.nativeUI.closeWaiting();
														}).start();
													} else { // 如果是冷更新，跳转到下载页下载安装
														$this.toColdUpdate(device.coldUpdateUrl)
													}
												}
											}
										}
									}
									break;
								default:
									break;
							}
						}
						xhr.open('GET', checkUpdateUrl);
						xhr.send();
					});
				}
			}
		}
	}
</script>

<style lang="less">
	@import '~vux/src/styles/reset.less';
	@import '~vux/src/styles/1px.less';
	input[type='file'] {
		outline: none;
		margin-top: 20px;
	}
	
	#clip_button {
		position: absolute;
		right: 10%;
		bottom: 20px;
		width: 80px;
		height: 40px;
		border: none;
		border-radius: 2px;
		background: #1AAD19;
		color: #fff;
	}
	
	#cancel_clip {
		position: absolute;
		left: 10%;
		bottom: 20px;
		width: 80px;
		height: 40px;
		border: none;
		border-radius: 2px;
		color: #fff;
		background: #E64340;
	}
	
	#clip_container.container {
		z-index: 99;
		position: fixed;
		padding-top: 60px;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 1);
	}
	
	#clip_container.container>div {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	#clip_image {
		max-width: 100%;
	}
	
	.cropper-container {
		font-size: 0;
		line-height: 0;
		position: relative;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		direction: ltr;
		-ms-touch-action: none;
		touch-action: none
	}
	
	.crop_loading,
	.crop_success {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
	}
	
	.crop_loading .crop_content {
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		background: #000;
		opacity: 0.9;
		height: 100px;
		width: 100px;
		vertical-align: middle;
		color: #fff;
		padding-top: 20px;
		font-size: 16px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	.crop_loading .crop_content img {
		margin-top: 15px;
		margin-bottom: 10px;
	}
	
	.crop_success .crop_success_text {
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		background: #000;
		opacity: 0.9;
		width: 120px;
		height: 30px;
		color: #fff;
		line-height: 30px;
		font-size: 16px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	.cropper-container img {
		/* Avoid margin top issue (Occur only when margin-top <= -height) */
		display: block;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100%;
		height: 100%;
		image-orientation: 0deg
	}
	
	.cropper-wrap-box,
	.cropper-canvas,
	.cropper-drag-box,
	.cropper-crop-box,
	.cropper-modal {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.cropper-wrap-box {
		overflow: hidden;
	}
	
	.cropper-drag-box {
		opacity: 0;
		background-color: #fff;
	}
	
	.cropper-modal {
		opacity: .5;
		background-color: #000;
	}
	
	.cropper-view-box {
		display: block;
		overflow: hidden;
		width: 100%;
		height: 100%;
		outline: 1px solid #39f;
		outline-color: rgba(51, 153, 255, 0.75);
	}
	
	.cropper-dashed {
		position: absolute;
		display: block;
		opacity: .5;
		border: 0 dashed #eee
	}
	
	.cropper-dashed.dashed-h {
		top: 33.33333%;
		left: 0;
		width: 100%;
		height: 33.33333%;
		border-top-width: 1px;
		border-bottom-width: 1px
	}
	
	.cropper-dashed.dashed-v {
		top: 0;
		left: 33.33333%;
		width: 33.33333%;
		height: 100%;
		border-right-width: 1px;
		border-left-width: 1px
	}
	
	.cropper-center {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 0;
		height: 0;
		opacity: .75
	}
	
	.cropper-center:before,
	.cropper-center:after {
		position: absolute;
		display: block;
		content: ' ';
		background-color: #eee
	}
	
	.cropper-center:before {
		top: 0;
		left: -3px;
		width: 7px;
		height: 1px
	}
	
	.cropper-center:after {
		top: -3px;
		left: 0;
		width: 1px;
		height: 7px
	}
	
	.cropper-face,
	.cropper-line,
	.cropper-point {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		opacity: .1;
	}
	
	.cropper-face {
		top: 0;
		left: 0;
		background-color: #fff;
	}
	
	.cropper-line {
		background-color: #39f
	}
	
	.cropper-line.line-e {
		top: 0;
		right: -3px;
		width: 5px;
		cursor: e-resize
	}
	
	.cropper-line.line-n {
		top: -3px;
		left: 0;
		height: 5px;
		cursor: n-resize
	}
	
	.cropper-line.line-w {
		top: 0;
		left: -3px;
		width: 5px;
		cursor: w-resize
	}
	
	.cropper-line.line-s {
		bottom: -3px;
		left: 0;
		height: 5px;
		cursor: s-resize
	}
	
	.cropper-point {
		width: 5px;
		height: 5px;
		opacity: .75;
		background-color: #39f
	}
	
	.cropper-point.point-e {
		top: 50%;
		right: -3px;
		margin-top: -3px;
		cursor: e-resize
	}
	
	.cropper-point.point-n {
		top: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: n-resize
	}
	
	.cropper-point.point-w {
		top: 50%;
		left: -3px;
		margin-top: -3px;
		cursor: w-resize
	}
	
	.cropper-point.point-s {
		bottom: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: s-resize
	}
	
	.cropper-point.point-ne {
		top: -3px;
		right: -3px;
		cursor: ne-resize
	}
	
	.cropper-point.point-nw {
		top: -3px;
		left: -3px;
		cursor: nw-resize
	}
	
	.cropper-point.point-sw {
		bottom: -3px;
		left: -3px;
		cursor: sw-resize
	}
	
	.cropper-point.point-se {
		right: -3px;
		bottom: -3px;
		width: 20px;
		height: 20px;
		cursor: se-resize;
		opacity: 1
	}
	
	@media (min-width: 768px) {
		.cropper-point.point-se {
			width: 15px;
			height: 15px
		}
	}
	
	@media (min-width: 992px) {
		.cropper-point.point-se {
			width: 10px;
			height: 10px
		}
	}
	
	@media (min-width: 1200px) {
		.cropper-point.point-se {
			width: 5px;
			height: 5px;
			opacity: .75
		}
	}
	
	.cropper-point.point-se:before {
		position: absolute;
		right: -50%;
		bottom: -50%;
		display: block;
		width: 200%;
		height: 200%;
		content: ' ';
		opacity: 0;
		background-color: #39f
	}
	
	.cropper-invisible {
		opacity: 0;
	}
	
	.cropper-bg {
		background-image: url('');
	}
	
	.cropper-hide {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
	}
	
	.cropper-hidden {
		display: none !important;
	}
	
	.cropper-move {
		cursor: move;
	}
	
	.cropper-crop {
		cursor: crosshair;
	}
	
	.cropper-disabled .cropper-drag-box,
	.cropper-disabled .cropper-face,
	.cropper-disabled .cropper-line,
	.cropper-disabled .cropper-point {
		cursor: not-allowed;
	}
</style>